// 初始化
$(function(){
    // 点击搜索按钮获取输入框的值
    $(".my_search_button").on("click",function(){
        // 获取输入的值
        var text = $(".my_search_input").val();
        console.log("text:",text);
        // 判断输入框是否有值
        if(text == "") {
            $(".my_alert").slideDown(300);
            $(".my_alert").text("输入框不能为空!")
            setTimeout(function(){
                $(".my_alert").hide();
            },1000)
            return false;
        }

        // 执行搜索词汇的方法
        getSearchData(text);
    })

    // 记录服务地址
    // var host = "http://127.0.0.1:7000";


    // 编写函数  获取搜索词汇的结果
    function getSearchData(keyword){
        // 调用ajax函数
        $.ajax({
            url: host+"/search",
            type: "GET",
            data: {
                kw: keyword
            },
            success: function(resData){
                // 后台数据
                console.log(resData)
                // 词汇数组
                var result = resData.result;
                // 渲染数据
                renderWordList(result);

                // 判断数组是否有值
                if(result.length != 0){
                    $(".empty").hide();
                }
                else {
                    $(".empty").show();
                }
            },
            error: function(err){
                console.log("失败:",err)
            }
        })
    }


    // 编写函数  渲染词汇数组
    function renderWordList(arr){
        var str = "";
        for(var i = 0 ; i  < arr.length ; i ++){
            str += `
             <li class="list-group-item">
                <a href="detail.html?word=${arr[i].word}">
                    <div>
                        <span>词汇: ${arr[i].word}</span>  
                        <i class="bi bi-volume-down"></i>
                        <span class="text-danger">音标: ${arr[i].phonetic}</span>
                        <span>翻译: ${arr[i].translation}</span>
                    </div>
                    <div>
                        <span class="text-info">句子: ${arr[i].exampleSentence}</span>
                    </div>
                    <div>
                        句子翻译: ${arr[i].sentenceTranslation}
                    </div>
                </a>
            </li>
            `
        }
        // 渲染字符串
        $(".my_search_list").html(str);
    }


    // 点击返回
    $(".my_back_button").click(function(){
        history.go(-1)
    })
})


// 思路：
// 1： 事件交互，例如：点击按钮输入框的值
// 2： 网络请求，例如：获取后台的数据
// 3： 剖析数据并渲染，例如：处理json格式数据，进行字符串拼接